<!-- 4 -->
<template>
  <div class="addshop_main">
    <!-- 顶部 -->
    <div class="add_headeer">
      商品设置：
      <el-radio v-model="radio" label="SingleRule" @change="OmnipotentRule">
        单规则</el-radio
      >
      <el-radio v-model="radio" label="MultipleRules" @change="OmnipotentRule"
        >多规则</el-radio
      >
    </div>
    <main class="OmnipotentRule">
      <!-- 动态组件 -->
      <component v-bind:is="radio" />
    </main>
  </div>
</template>

<script>
//单规则组件
import SingleRule from "./SingleRule";
//多规则组件
import MultipleRules from "./MultipleRules";
export default {
  name: "FourShop",
  //import引入的组件需要注入到对象中才能使用
  components: {
    SingleRule,
    MultipleRules,
  },
  data() {
    //这里存放数据
    return {
      radio: "SingleRule",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    OmnipotentRule(e) {
      this.radio = e;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
// 全页面
.addshop_main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 5px 20px;
  // 头部
  .add_headeer {
    width: 100%;
    font-size: 14px;
    margin-bottom: 5px;
  }
  // 规则页面
  .OmnipotentRule {
    flex: 1;
  }
}
</style>
